<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>传书</title>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/aui.css"/>
    <link rel="stylesheet" href="css/shop.css">
    <link rel="stylesheet" href="css/alert.css">
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/init.js"></script>
</head>
<body>
    <header class="mui-bar mui-bar-nav ">
        <a href="index2.html" class="mui-icon-undo mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" id="page_title">{$data.page_title}</h1>
        <img class="chat_add fr aui-mar-t-15" src="images/addfriend.png" alt="" width="20">
    </header>

    <div class="mui-content f14">
        <div class="chat_btn aui-col-5 mui-text-center aui-border-radius aui-background-white flex line-height-2 hidden" style="border:1px solid #06a1ff;margin:20px auto;">
            <div class="f1 active">最新消息</div>
            <div class="f1">全部好友</div>
        </div>
        <div class="chat">
            <div class="chat_con aui-pad-10">
                <div class="mui-row aui-pad-5">
                    <div class="mui-col-sm-2 mui-col-xs-2 aui-pad-t-5"><img class="aui-col-7" src="images/chat_jianghu.png" alt=""></div>
                    <div class="mui-col-sm-10 mui-col-xs-10 aui-border-b-gray aui-pad-5">
                        <div class="aui-col-8 re">
                            <div><a class="aui-color-black" href="chat_menpai.html"><b>门派推荐</b></a></div>
                            <div class="f12 line-height-2">近期我们会上线门派，敬请期待...</div>
                        </div>
                        <div class="f12 ab retop reri">1天前</div>
                    </div>
                </div>
                <div class="mui-row aui-pad-5">
                    <div class="mui-col-sm-2 mui-col-xs-2 aui-pad-t-5"><img class="aui-col-7" src="images/chat_friend.png" alt=""></div>
                    <div class="mui-col-sm-10 mui-col-xs-10 aui-border-b-gray aui-pad-5">
                        <div class="aui-col-8 re">
                            <div><b>系统通知</b></div>
                            <div class="f12 line-height-2">近期我们会上线门派 ，敬请期待...</div>
                        </div>
                        <div class="f12 ab retop reri">1天前</div>
                    </div>
                </div>
                <div class="chat_user mui-row aui-pad-5">
                    <div class="mui-col-sm-2 mui-col-xs-2 aui-pad-t-5"><img class="aui-col-7" src="image/avatar.png" alt=""> </div>
                    <div class="mui-col-sm-10 mui-col-xs-10 aui-border-b-gray aui-pad-5">
                        <div class="aui-col-8 re">
                            <div><a class="aui-color-black" href="chat_add.html"><b>新的好友</b></a></div>
                            <div class="f12 line-height-2">近期我们会上线门派，敬请期待...</div>
                        </div>
                        <div class="f12 ab retop reri">1天前</div>
                    </div>
                </div>
                <div class="mui-row aui-pad-5">
                    <div class="mui-col-sm-2 mui-col-xs-2 aui-pad-t-5"><img class="aui-col-7" src="images/chat_menpai.png" alt=""> </div>
                    <div class="mui-col-sm-10 mui-col-xs-10 aui-border-b-gray aui-pad-5">
                        <div class="aui-col-8 re">
                            <div><b>附近的人</b></div>
                            <div class="f12 line-height-2">近期我们会上线门派，敬请期待...</div>
                        </div>
                        <div class="f12 ab retop reri">1天前</div>
                    </div>
                </div>
            </div>
            <!--最新消息-->

            <div class="chat_con all_friend re" style="display: none;">
                <ul class="right_zm fix reri flex" style="z-index:10;top:50px;height:calc(100vh - 60px);flex-direction: column;justify-content:space-between;">
                    <li class="a"><a class="aui-color-black" href="#A">A</a></li>
                    <li class="b"><a class="aui-color-black" href="#B">B</a></li>
                    <li class="c"><a class="aui-color-black" href="#C">C</a></li>
                    <li class="d"><a class="aui-color-black" href="#D">D</a></li>
                    <li class="e"><a class="aui-color-black" href="#E">E</a></li>
                    <li class="f"><a class="aui-color-black" href="#F">F</a></li>
                    <li class="e"><a class="aui-color-black" href="#G">G</a></li>
                    <li class="h"><a class="aui-color-black" href="#H">H</a></li>
                    <li class="i"><a class="aui-color-black" href="#I">I</a></li>
                    <li class="j"><a class="aui-color-black" href="#J">J</a></li>
                    <li class="k"><a class="aui-color-black" href="#K">K</a></li>
                    <li class="l"><a class="aui-color-black" href="#L">L</a></li>
                    <li class="m"><a class="aui-color-black" href="#M">M</a></li>
                    <li class="n"><a class="aui-color-black" href="#N">N</a></li>
                    <li class="o"><a class="aui-color-black" href="#O">O</a></li>
                    <li class="p"><a class="aui-color-black" href="#P">P</a></li>
                    <li class="q"><a class="aui-color-black" href="#Q">Q</a></li>
                    <li class="r"><a class="aui-color-black" href="#R">R</a></li>
                    <li class="s"><a class="aui-color-black" href="#S">S</a></li>
                    <li class="t"><a class="aui-color-black" href="#T">T</a></li>
                    <li class="u"><a class="aui-color-black" href="#U">U</a></li>
                    <li class="v"><a class="aui-color-black" href="#V">V</a></li>
                    <li class="w"><a class="aui-color-black" href="#W">W</a></li>
                    <li class="x"><a class="aui-color-black" href="#X">X</a></li>
                    <li class="y"><a class="aui-color-black" href="#Y">Y</a></li>
                    <li class="z"><a class="aui-color-black" href="#Z">Z</a></li>
                    <li class="1"><a class="aui-color-black" href="#A">#</a></li>
                </ul>

                <ul class="mui-table-view aui-mar-t-15">
                    <li class="zm_titl" ><a id="A" name="A" href="">A</a></li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                </ul>
                <ul class="mui-table-view aui-mar-t-15">
                    <li class="zm_titl" ><a id="B" href="" name="B">B</a></li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                </ul>
                <ul class="mui-table-view aui-mar-t-15">
                    <li class="zm_titl" ><a id="C" name="C" href="">C</a></li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                </ul>
                <ul class="mui-table-view aui-mar-t-15">
                    <li class="zm_titl" ><a id="D" name="D" href="">D</a></li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                </ul>
                <ul class="mui-table-view aui-mar-t-15">
                    <li class="zm_titl" ><a id="E" name="E" href="">E</a></li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                </ul>
                <ul class="mui-table-view aui-mar-t-15">
                    <li class="zm_titl" ><a id="F" name="F" href="">F</a></li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="chat_online.html">
                            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                            <div class="mui-media-body">
                                <h2>张歆艺</h2>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="alert f14 none">
        <div class="addfriend box mui-text-center re none">
            <div class="tc_btn">添加好友</div>
            <div class="aui-border-radius"><input class="search f12" type="text" placeholder="搜索好友id"></div>
            <div class="aui-pad-t-15 flex" style="justify-content:space-around;">
                <div class="cancel gray_btn" style="width:40%;">取消</div>
                <div class="add_yes orange_btn" style="width:40%;">确定</div>
            </div>
        </div>
        <!--add搜索好友-->

        <div class="haoyou_info box mui-text-center line-height-2 re none" style="height:auto;">
            <img class="user_tx ab aui-border-rasius-y" src="image/avatar.png" alt="" width="80" height="80">
            <img class="ab chat_back" style="top:20px;left:20px;" src="images/tc_back.png" alt="" width="20">
            <img class="ab jubao_btn" style="top:20px;right:30px;" src="images/tc_jubao.png" alt="" width="60">
            <div class="f15 aui-pad-b-5"><img class="aui-mar-r-5" src="image/sex1.png" alt="" width="14"><b>司马懿</b>ID:368</div>
            <div class="aui-col-9 auto mui-row mui-text-left f12">
                <div class="mui-col-sm-6 mui-col-xs-6"><div>段位：绿蓝带</div><div>胜率：77%</div></div>
                <div class="mui-col-sm-6 mui-col-xs-6"><div>人气：99999</div><div>运气：999</div></div>
            </div>
            <div class="aui-pad-t-10 mui-text-center hidden" style="margin-left:10%;">
                <div class="send_liwu blue_btn fl aui-mar-r-10" style="width:40%;">送礼物</div>
                <div class="add_btn green_btn fl" style="width:40%;">加好友</div>
            </div>
        </div>
        <!--好友信息-->

        <div class="gift fix aui-col-10 mui-text-center" style="left:0;bottom:-200px;">
            <div class="gift_bg aui-col-5 auto aui-pad-10">送给 <img src="image/avatar.png" alt="" width="14">小思设计2017</div>
            <div class="gift_bg f12">
                <div class="re" style="height:110px;overflow-x:auto;">
                    <div class="gift_con flex border-t-yellow ab" style="overflow-x:auto;">
                        <div class="aui-pad-5 aui-mar-5">
                            <img src="images/gift1.png" alt="" height="50">
                            <div><img class="vmid" src="images/xing.png" alt="" width="16">100</div>
                        </div>
                        <div class="aui-pad-5 aui-mar-5">
                            <img src="images/gift1.png" alt="" height="50">
                            <div><img class="vmid" src="images/xing.png" alt="" width="16">100</div>
                        </div>
                        <div class="aui-pad-5 aui-mar-5">
                            <img src="images/gift1.png" alt="" height="50">
                            <div><img class="vmid" src="images/xing.png" alt="" width="16">100</div>
                        </div>
                        <div class="aui-pad-5 aui-mar-5">
                            <img src="images/gift1.png" alt="" height="50">
                            <div><img class="vmid" src="images/xing.png" alt="" width="16">100</div>
                        </div>
                        <div class="aui-pad-5 aui-mar-5">
                            <img src="images/gift1.png" alt="" height="50">
                            <div><img class="vmid" src="images/xing.png" alt="" width="16">100</div>
                        </div>
                        <div class="aui-pad-5 aui-mar-5">
                            <img src="images/gift1.png" alt="" height="50">
                            <div><img class="vmid" src="images/xing.png" alt="" width="16">100</div>
                        </div>
                        <div class="aui-pad-5 aui-mar-5">
                            <img src="images/gift1.png" alt="" height="50">
                            <div><img class="vmid" src="images/xing.png" alt="" width="16">100</div>
                        </div>
                        <div class="aui-pad-5 aui-mar-5">
                            <img src="images/gift1.png" alt="" height="50">
                            <div><img class="vmid" src="images/xing.png" alt="" width="16">100</div>
                        </div>
                    </div>

                </div>
                <div class="aui-pad-5 border-t-yellow">
                    <div class="aui-border-radius fl gift_btn">充值：<img class="vmid" src="images/xing.png" alt="" width="16">100 ></div>
                    <div class="send_btn blue_btn fr aui-color-white">赠送</div>
                    <div class="fr re aui-mar-r-10">
                        <div class="aui-border-radius gift_btn">×<span class="num">01</span> <span class="more fr"></span></div>
                        <ul class="gift_num mui-text-center ab none" style="width:140%;left:0;bottom:35px;background:#c8b617;">
                            <li class="action">100</li>
                            <li>50</li>
                            <li>30</li>
                            <li>20</li>
                            <li>10</li>
                            <li>01</li>
                        </ul>
                    </div>
                    <div style="clear:both;"></div>
                </div>
            </div>
        </div>
        <!--送礼物-->

        <div class="jubao_con box mui-text-center re none" style="padding:30px;">
            <div class="tc_btn f14">举 报</div>
            <div class="mui-text-left f14 line-height-2" style="padding:10px 0 0 20px;">
                <div>玩家：司马懿大司马</div>
                <form action="" method="get" style="padding-left:20px;">
                    <label><input name="ju" type="radio">辱骂，人身攻击</label><br/>
                    <label><input name="ju" type="radio">广告，色情，政治</label><br/>
                    <label><input name="ju" type="radio">影响其他玩家游戏</label><br/>
                    <label><input name="ju" type="radio">恶意举报</label><br/>
                    <label><input name="ju" type="radio">其他原因</label><br/>
                </form>
            </div>
            <div class="aui-pad-t-15 flex" style="justify-content:space-around;">
                <div class="cancel gray_btn" style="width:40%;">取消</div>
                <div class="yes orange_btn" style="width:40%;">确定</div>
             </div>
        </div>
        <!--举报内容-->
    </div>

    <div class="send_alert fix mui-text-center aui-color-white aui-col-3 f14 line-height-3 aui-border-radius none" style="background:rgba(0,0,0,0.4);bottom:5vh;left:35vw;z-index:999;">发送成功</div>
    <!--发送好友请求-->
    <div class="fix mui-text-center aui-color-white aui-col-3 f14 line-height-3 aui-border-radius none" style="background:rgba(0,0,0,0.5);bottom:5vh;left:35vw;">赠送成功</div>
    <!--赠送成功-->
    <div class="fix mui-text-center aui-color-white aui-col-4 f14 line-height-3 aui-border-radius none" style="background:rgba(0,0,0,0.5);bottom:5vh;left:35vw;">积分不足，请充值！</div>
    <!--积分不足-->


</body>
<script src="js/alert.js"></script>
</html>